<%-- 
    Document   : single
    Created on : 24/07/2013, 15:27:39
    Author     : Jean Carlo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>SIMPLE</title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <!--[if IE 6]>
                <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
                <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
                <script>
                /* EXAMPLE */
                DD_belatedPNG.fix('*');
        </script>
        <![endif]-->
        <!--[if IE 7]>
                <link rel="stylesheet" href="css/ie7-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!--[if IE 8]>
                <link rel="stylesheet" href="css/ie8-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!-- ENDS CSS -->

        <!-- prettyPhoto -->
        <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
        <!-- ENDS prettyPhoto -->

        <!-- JS -->
        <script type="text/javascript" src="js/jquery_1.4.2.js"></script>
        <script type="text/javascript" src="js/jqueryui.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/tooltip/jquery.tools.min.js"></script>
        <script type="text/javascript" src="js/filterable.pack.js"></script>
        <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="js/chirp.js"></script>
        <script type="text/javascript" src="js/jquery.tabs/jquery.tabs.pack.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <!-- ENDS JS -->

        <!-- Cufon -->
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/fonts/bebas-neue_400.font.js" type="text/javascript"></script>
        <!-- /Cufon -->

        <!-- superfish -->
        <link rel="stylesheet" type="text/css" media="screen" href="css/superfish-custom.css" /> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script> 
        <!-- ENDS superfish -->

        <!-- tabs -->
        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen" />
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <!-- ENDS tabs -->

    </head>


    <body>

        <!-- HEADER -->
        <div id="header">
            <div class="degree">
                <div class="wrapper">
                    <a href="index.jsp"><img src="img/logo.png" alt="Logo" id="logo" /></a>

                    <!-- search -->
                    <div class="top-search">
                        <form  method="get" id="searchform" action="">
                            <div>
                                <input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
                                <input type="submit" id="searchsubmit" value=" " />
                            </div>
                        </form>
                    </div>
                    <!-- ENDS search -->

                    <!-- navigation -->
                    <div id="nav-holder">
                        <ul id="nav" class="sf-menu">
                            <li><a href="index.jsp">HOME</a>
                                <ul>
                                    <li><a href="index-3d.jsp">3D SLIDESHOW</a></li>
                                </ul>
                            </li>
                            <li><a href="about.jsp">FEATURES</a>
                                <ul>
                                    <li><a href="about.jsp">LAYOUT</a></li>
                                    <li><a href="about-styled.jsp">STYLED</a></li>
                                    <li><a href="about-more.jsp">MORE</a></li>
                                    <li><a href="about-toggle.jsp">TOGGLE BOX</a></li>
                                    <li><a href="about-accordion.jsp">ACCORDION</a></li>
                                    <li><a href="appearance.jsp">APPEARANCE</a></li>
                                </ul>
                            </li>
                            <li><a href="portfolio.jsp">PORTFOLIO</a></li>
                            <li><a href="gallery.jsp">GALLERY</a>
                                <ul>
                                    <li><a href="gallery.jsp">FOUR COLS</a></li>
                                    <li><a href="gallery-3.jsp">THREE COLS</a></li>
                                    <li><a href="gallery-2.jsp">TWO COLS</a></li>
                                </ul>
                            </li>
                            <li class="current_page_item"><a href="blog.jsp">BLOG</a></li>
                            <li><a href="contact.jsp">CONTACT</a></li>
                            <li><a href="staff.jsp">STAFF</a></li>
                            <li><a href="http://luiszuno.com/blog/downloads/simple-template ">DOWNLOAD</a></li>

                        </ul>
                    </div>
                    <!-- ENDS navigation -->

                </div>
                <!-- ENDS HEADER-wrapper -->
            </div>
        </div>
        <!-- ENDS HEADER -->

        <!-- MAIN -->
        <div id="main">
            <!-- wrapper -->
            <div class="wrapper">
                <!-- content -->
                <div class="content-blog">

                    <!-- POSTS -->
                    <div id="posts">
                        <!-- post -->
                        <div class="post">
                            <!-- post-header -->
                            <div class="post-header single">
                                <div class="post-title"><a href="single.jsp" >LOREM IPSUM DOLOR AMET </a></div>
                                <div class="post-meta">
                                    POSTED BY <a href="#">ADMIN</a> IN <a href="#">CATEGORY</a>
                                </div>
                            </div>
                            <!-- ENDS post-header -->

                            <!-- post-content -->								
                            <div>
                                <img src="img/dummies/feature-image.gif" alt="Dummy" title="dummy-about-2" />
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>


                                <ol>
                                    <li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li><li>sdasdas</li>
                                </ol>
                            </div>
                            <!-- ENDS post-content -->

                            <!-- comments list -->
                            <div class="comments-header"><span class="n-comments">25</span><span class="text">COMMENTS</span></div>
                            <ol class="comments-list">
                                <li>
                                    <div class="comment-wrap">
                                        <img alt='avatar' src='img/dummies/avatar.jpg' class='avatar' />
                                        <div class="comments-right">
                                            <div class="meta-date">May 05, 2010 @ 08:19 pm</div>
                                            <div><a href='#' class='url'><strong>Admin</strong></a></div>
                                            <div class="brief"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p></div>
                                            <p class="edit-comment"><a href="#">Edit</a></p>
                                        </div>
                                    </div>
                                    <ul class="children">
                                        <li>
                                            <div class="comment-wrap">
                                                <img alt='avatar' src='img/dummies/avatar.jpg' class='avatar' />
                                                <div class="comments-right">
                                                    <div class="meta-date">May 05, 2010 @ 08:19 pm</div>
                                                    <div><a href='#' class='url'><strong>Admin</strong></a></div>
                                                    <div class="brief"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p></div>
                                                    <p class="edit-comment"><a href="#">Edit</a></p>
                                                </div>
                                            </div>
                                            <ul class="children">
                                                <li>
                                                    <div class="comment-wrap">
                                                        <img alt='avatar' src='img/dummies/avatar.jpg' class='avatar' />
                                                        <div class="comments-right">
                                                            <div class="meta-date">May 05, 2010 @ 08:19 pm</div>
                                                            <div><a href='#' class='url'><strong>Admin</strong></a></div>
                                                            <div class="brief"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p></div>
                                                            <p class="edit-comment"><a href="#">Edit</a></p>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>

                                    </ul>
                                </li>
                                <li>
                                    <div class="comment-wrap">
                                        <img alt='avatar' src='img/dummies/avatar.jpg' class='avatar' />
                                        <div class="comments-right">
                                            <div class="meta-date">May 05, 2010 @ 08:19 pm</div>
                                            <div><a href='#' class='url'><strong>Admin</strong></a></div>
                                            <div class="brief"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p></div>
                                            <p class="edit-comment"><a href="#">Edit</a></p>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="comment-wrap">
                                        <img alt='avatar' src='img/dummies/avatar.jpg' class='avatar' />
                                        <div class="comments-right">
                                            <div class="meta-date">May 05, 2010 @ 08:19 pm</div>
                                            <div><a href='#' class='url'><strong>Admin</strong></a></div>
                                            <div class="brief"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p></div>
                                            <p class="edit-comment"><a href="#">Edit</a></p>
                                        </div>
                                    </div>
                                </li>
                            </ol>
                            <!-- ENDS comments list -->


                            <!-- comments form -->
                            <div class="leave-comment">
                                <h3>LEAVE A COMMENT</h3>	
                                <form action="" method="post" id="commentform">
                                    <fieldset>
                                        <p><label>NAME *</label>
                                            <input type="text"  value="" tabindex="1" /></p>
                                        <p><label for="email">EMAIL (Will not be published) *</label>
                                            <input type="text" name="email" id="email" value="" tabindex="2" /></p>
                                        <p><label for="url">WEBSITE</label><input type="text" name="url" id="url" value="" tabindex="3" /></p>
                                        <p><label for="comment">COMMENTS</label>
                                            <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
                                        <p><input type="submit" name="submit" id="submit" tabindex="5" value="SEND" /></p>
                                        <p><input type="hidden" name="comment_post_ID" value="51" /></p>
                                    </fieldset>
                                </form>
                            </div>
                            <!-- ENDS comments form -->	



                        </div>
                        <!-- ENDS post -->


                    </div>	
                    <!-- ENDS POSTS -->

                    <!-- sidebar -->
                    <ul id="sidebar">
                        <!-- init sidebar -->
                        <li>
                            <h2 class="custom"><span>CATEGORIES</span></h2>		
                            <ul>
                                <li class="cat-item"><a href="#" title="View all posts filed under Design">DESIGN</a></li>
                                <li class="cat-item"><a href="#" title="View all posts filed under Design">WEB</a></li>
                                <li class="cat-item"><a href="#" title="View all posts filed under Design">PHOTO</a></li>
                                <li class="cat-item"><a href="#" title="View all posts filed under Design">CODING</a></li>
                            </ul>
                        </li>	
                        <!-- ENDS init sidebar -->

                        <!-- recent posts -->
                        <li class="recent-posts">
                            <h2 class="custom"><span>RECENT POSTS</span></h2>
                            <ul>
                                <li>
                                    <a href="#" title="EASY TO USE"><img src="img/dummies/dummy-post-48.gif" alt="Thumbnail" title="Thumbnail" /></a>
                                    <div class="recent-excerpt">
                                        <div><a href="#">LOREM IPSUM</a></div>
                                        <div>Pellentesque habitant morbi fames ac turpis egestas...</div>
                                    </div>		   					   		
                                </li>
                                <li>
                                    <a href="#" title="EASY TO USE"><img src="img/dummies/dummy-post-48.gif" alt="Thumbnail" title="Thumbnail" /></a>
                                    <div class="recent-excerpt">
                                        <div><a href="#">LOREM IPSUM</a></div>
                                        <div>Pellentesque habitant morbi fames ac turpis egestas...</div>
                                    </div>		   					   		
                                </li>
                                <li>
                                    <a href="#" title="EASY TO USE"><img src="img/dummies/dummy-post-48.gif" alt="Thumbnail" title="Thumbnail" /></a>
                                    <div class="recent-excerpt">
                                        <div><a href="#">LOREM IPSUM</a></div>
                                        <div>Pellentesque habitant morbi fames ac turpis egestas...</div>
                                    </div>		   					   		
                                </li>				
                            </ul>
                        </li>
                        <!-- ENDS recent posts -->
                    </ul>
                    <!-- ENDS sidebar -->



                </div>
                <!-- ENDS content-blog -->

                <!-- twitter -->
                <div class="twitter-reader">
                    <script>Chirp({user:"ansimuz",max:1})</script></div>
            </div>
            <!-- ENDS twitter -->

        </div>
        <!-- ENDS main-wrapper -->


        </div>		
        <!-- ENDS MAIN -->	

        <!-- FOOTER -->
        <div id="footer">
            <div class="degree">
                <!-- wrapper -->
                <div class="wrapper">
                    <!-- social bar -->
                    <div id="social-bar">

                        <ul class="follow-us">
                            <li><span>FOLLOW US</span></li>
                            <li ><a href="#" class="icon-32 twitter-32 social-tooltip" title="Follow our tweets">link</a></li>
                            <li ><a href="#" class="icon-32 vimeo-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 dribbble-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 flickr-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 facebook-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>

                        </ul>
                    </div>
                    <!-- ENDS social bar -->
                    <!-- footer-cols -->
                    <ul class="footer-cols">
                        <li class="col">
                            <h6>CATEGORIES</h6>
                            <ul>
                                <li><a href="#">WEBDESIGN</a></li>
                                <li><a href="#/">WORDPRESS</a></li>
                                <li><a href="#">PHOTO</a></li>
                                <li><a href="#">CODING</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>FREE TEMPLATES &amp; THEMES</h6>
                            <p>Get tons of free high quality templates at <a href="http://templatecreme.com">Template Creme</a>.</p>
                        </li>	
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>		
                    </ul>
                    <!-- ENDS footer-cols -->
                </div>
                <!-- ENDS footer-wrapper -->
            </div>
        </div>
        <!-- ENDS FOOTER -->


        <!-- BOTTOM -->
        <div id="bottom">
            <!-- wrapper -->
            <div class="wrapper">
                SIMPLE THEME by <a href="http://www.luiszuno.com" >luiszuno.com</a>
            </div>
            <!-- ENDS bottom-wrapper -->
        </div>
        <!-- ENDS BOTTOM -->

        <!-- start cufon -->
        <script type="text/javascript"> Cufon.now(); </script>
        <!-- ENDS start cufon -->

    </body>
</html>